<template>
  <div class="content">
    <el-space wrap>
      <el-card class="box-card" style="width: 800px">
        <template #header>
          <div class="card-header">
            <span>修改密码</span>
          </div>
        </template>
        <!-- 表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="旧密码" prop="oldPass">
            <el-input
              v-model="ruleForm.oldPass"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="新密码" prop="newPass">
            <el-input
              v-model="ruleForm.newPass"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="新密码确认" prop="newPassAgain">
            <el-input
              v-model="ruleForm.newPassAgain"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleFormRef')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleFormRef')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-space>
  </div>
</template>

<script>
import { post } from "@/utils/http";
export default {
  data() {
    //旧密码验证
    let validatePassO = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        callback();
      }
    };
    //新密码验证
    let validatePassN = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    //输入新密码验证
    let validatePassNA = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.ruleForm.newPass) {
        callback(new Error("两次密码不相等"));
      } else {
        callback();
      }
    };
    return {
      // 表单提交数据
      ruleForm: {
        oldPass: "",
        newPass: "",
        newPassAgain: "",
      },
      //触发验证的条件
      rules: {
        oldPass: [{ validator: validatePassO, trigger: "blur" }],
        newPass: [{ validator: validatePassN, trigger: "blur" }],
        newPassAgain: [{ validator: validatePassNA, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 提交
    submitForm(formEl) {
      this.$refs[formEl].validate((valid) => {
        // 表单验证成功
        if (valid) {
          // 请求需要的数据
          let data = {
            _mt: "newPassword",
            _gp: "admin",
            oldPassword: this.ruleForm.oldPass,
            newPassword: this.ruleForm.newPassAgain,
          };
          //发送请求
          post(data)
            .then((res) => {
              if (200 == res.errno) {
                ElMessage.success("修改成功");
                // 触发vuex中的退出登录函数
                this.$store.dispatch("logout", "");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          // 表单验证不通过的提示
          ElMessage.error("请确认表单是否按需求填写");
          return false;
        }
      });
    },
    // 重置
    resetForm(formEl) {
      this.$refs[formEl].resetFields();
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  margin: 20px;
}
</style>
